import "./index.scss";
//组件
import Header from "../../component/headers/index";
//redux
import { useSelector } from 'react-redux'
//路由
import { useHistory } from 'react-router-dom'
export const Home = () => {
  //路由跳转
  const { push } = useHistory()
  //redux 用户数据
  const { data } = useSelector(state => state)
  //列表数据
  const menuData = [
    {
      name: '消息',
      icon: 'iconfont icon-xiaoxi',
      path: '/news'
    },
    {
      name: '求租',
      icon: 'iconfont icon-building',
      path: '/purchase'
    },
    {
      name: '求购',
      icon: 'iconfont icon-icon_',
      path: "/purchase"
    },
    {
      name: '楼市圈',
      icon: 'iconfont icon-wuxing2',
      path: '/share'
    },
    {
      name: '直播',
      icon: 'iconfont icon-zhibo',
      path: ''
    },
    {
      name: '团购',
      icon: 'iconfont icon-tuangoufuwuzhongxin-01',
      path: '/group'
    },
    {
      name: '排行榜',
      icon: 'iconfont icon-shangdianxiaoshoupaihangbang',
      path: ''
    },
    {
      name: '战绩',
      icon: 'iconfont icon-paimai-paimaichui-paimaihang-paimaichui',
      path: '/record'
    },
  ]
  const toRouter = (item) => {
    push({
      pathname: item.path,
      state: { name: item.name }
    });
    console.log(item);
  }
  return (
    <div className="home">
      <Header></Header>
      <div className="home-main">
        <div className="portrait">
          <div className="img">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2Fiamc9fNN354PRpoUr4LCsNmdwZDZDInjwiaeMY954e1hRZOAGZb8UaM0erTc4OlVic1KChxtIWKQBiaxjkU6icIP6Mw%2F640%3Fwx_fmt%3Djpeg&refer=http%3A%2F%2Fmmbiz.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642942774&t=e96db8a1976b12c35c14f4a4e18d7184" alt="" />

          </div>
          <span>{data ? data.user : '访客'}</span>
        </div>
        <div className="navHouses">
          <div onClick={() => {
            console.log(1);
            push({ pathname: '/newhouse', state: { type: '新房' } })
          }}>
            <h3>188</h3>
            <p>新房</p>
          </div>
          <div onClick={() => {
            push({ pathname: '/newhouse', state: { type: '二手房' } })
          }}>
            <h3>188</h3>
            <p>二手房</p>
          </div>
          <div onClick={() => {
            push({ pathname: '/newhouse', state: { type: '租房' } })
          }}>
            <h3>188</h3>
            <p>出租房</p>
          </div>
        </div>
        <div className="home-menu">
          {
            menuData.map((item => {
              return <div key={item.icon} className='menu-item' onClick={() => toRouter(item)}>
                <i className={item.icon}></i>
                <span>{item.name}</span>
              </div>
            }))
          }
        </div>
      </div>
    </div>
  );
};

export default Home;
